<template>
  <div class="tag-wrapper">
    <div class="wrapper-in">
      <header>
        <div class="title">{{ title }}</div>
        <div class="way" v-if="way" :class="typeColor">{{ way }}</div>
      </header>
      <div class="border"></div>
      <section>        
        <div class="section-left">
          <div class="number" :class="fontColor">{{ dValue }}</div>
          <div class="numberName" :class="fontColor">{{ double.numberName }}</div>
        </div>
        <div class="section-right" v-if="JSON.stringify(double) !== '{}'">
          <div class="number" :class="fontColor">{{ value }}</div>
          <div class="numberName" :class="fontColor">{{ numberName }}</div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
  export default {
    name: "tags",
    computed: {
      fontColor() {
        return `font${this.typeColor}`       
      },
      dValue() {       
        if(JSON.stringify(this.double) !== '{}') {
          if(this.double.value === undefined) {
            return `0${this.double.unit}`
          }
          if(this.double.unit && this.double.unit === 'percent') {
            return (Number(this.double.value) * 100).toFixed(2) + '%'
          } else {
            return `${this.double.value}${this.double.unit}`
          }
        }
      },
      value() {
        if(this.unit && this.unit === 'percent') {
          return (Number(this.number) * 100).toFixed(2) + '%'
        } else {
          return `${this.number}${this.unit}`
        }
        if(!this.number) {
          return `0${this.unit}`
        }
      }
    },
    props: {
      unit: {
        type: String,
        default: ''
      },
      number: {
        type: [Number, String],
        default: 0,
        required: true
      },
      numberName: {
        type: String,
        default: ''
      },
      double: {
        type: Object,
        default: () => {
          return {
            value: 0,
            numberName: '',
            unit: ''
          }
        }
      },
      typeColor: {
        type: String,
        default: 'default'
      },
      title: {
        type: String,
        required: true
      },
      way: {
        type: String,
        default: ''
      }
    }
  }
</script>

<style scoped lang="scss">
  .default{
    background: #409eff;
  }
  .fontdefault{
    color: #409eff;
  }
  .danger{
    background: #ed5565;
  }
  .fontdanger{
    color: #ed5565;
  }
  .warn{
    background: #e6a23c;
  }
  .fontwarn{
    color: #e6a23c;
  }
  .tag-wrapper{
    margin-bottom: 25px;
    .wrapper-in{
      background-color: #ffffff;
      header{
        padding: 15px;
        padding-bottom: 0;
        display: flex;       
        .title{
          color: #676a6c;
          flex: 1;
          margin: auto 0;
          font-size: 14px;
          padding: 4px 6px;
          text-overflow: ellipsis;
        }
        .way{
          color: #ffffff;
          margin: auto 0;
          padding: 4px 6px;
          border-radius: 5px;
        }
      }
      .border{
        border-bottom: 1px solid #dfe4ed;
        margin-top: 20px;
      }
      section{     
        height: 89.58px;
        padding: 0 15px;
        display: flex;
        .section-left{
          flex: 1;
          padding: 15px 0px 20px 0px;
          font-size: 30px;
          .numberName{
            margin-top: 10px;
            font-size: 50%;
            font-weight: 600;
          }
        }
        .section-right{
          flex: 1;
          text-align: right;
          font-size: 30px;
          padding: 15px 0px 20px 0px;
          .numberName{
            margin-top: 10px;
            font-size: 50%;
            font-weight: 600;
          }
        }
      }
    }
  }
</style>